<template>
    <div>
      <el-card class="survey-detail-card">
        <h2>{{ surveyDetail.title }}</h2>
        <el-divider></el-divider>
        <div v-for="question in surveyDetail.questions" :key="question.id" class="question-block">
          <el-card>
            <h3>{{ question.title }}</h3>
            <p>{{ question.description }}</p>
            <div v-if="question.type === 'radio'">
              <el-checkbox-group>
                <el-checkbox
                    v-for="option in question.options"
                    :key="option.id"
                    :label="option.id"
                    :disabled="true"
                    :checked="option.checked === 1"
                >
                  {{ option.text }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="question.type === 'checkbox'">
              <el-checkbox-group>
                <el-checkbox
                    v-for="option in question.options"
                    :key="option.id"
                    :label="option.id"
                    :disabled="true"
                    :checked="option.checked === 1"
                >
                  {{ option.text }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="question.type === 'textarea'">
              <el-input
                  type="textarea"
                  :value="question.text"
                  :rows="3"
                  disabled
              ></el-input>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { reactive, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import axios from 'axios';
  import request from '../../utils/request';

  const surveyDetail = reactive({
    id: null,
    title: '',
    status: null,
    userId: null,
    questions: []
  });
  const route = useRoute();
  
  const fetchSurveyDetail = async () => {
    const token = localStorage.getItem('token');
    const surveyId = localStorage.getItem('surveyId');
    console.log(token);
    const config = {
      method:'get',
      url:'api/commit/commitDetail',
      params:{
        surveyId,
      },
    };
    const s_id=localStorage.getItem('s_id');
    try {
      const response = await request.get('api/commit/commitDetail',{
        params:{
            surveyId:s_id,
        }
      });
      console.log(response.data);
      Object.assign(surveyDetail, response.data);
      if(response.code === "200"){
        console.log("查看已填问卷详情成功");
        localStorage.removeItem('s_id');
      }else{
      }
    } catch (error) {
      console.error('Error fetching survey detail:', error);
  
    }
  };
  
  onMounted(fetchSurveyDetail);
  </script>
  
  <style scoped>
  .survey-detail-card {
    max-width: 800px;
    margin: 20px auto;
  }
  
  .question-block {
    margin-bottom: 20px;
  }
  
  .question-block:last-child {
    margin-bottom: 0;
  }
  </style>
  